<template>
	<view>
		<view class="" :style="{'padding-left':paddingLeft}">
			<view class="uni-flex" :style="{'border-bottom':borderBottom}">
				<view class="" :style="{'padding-bottom':paddingBottom,'padding-top':paddingTop,'font-size':lableFontSize,'line-height':lableHeight,'color':lableFontColor}">
					{{lable}}
				</view>
				<view v-if="type=='text'" class="donglabel" :style="{'padding-right':dongLabelpaddingRight,'padding-top':dongLabelpaddingTop,'font-size':dongLabelFontSize,'line-height':dongLabelHeight,'color':dongLabelFontColor}">{{dongLabel}}</view>
				<input @change="inputChang" v-else-if="type=='input'" class="donglabel" type="text" v-model="inputValue2" :placeholder="placeholder" :style="{'padding-right':dongLabelpaddingRight,'padding-top':dongLabelpaddingTop,'font-size':dongLabelFontSize,'line-height':dongLabelHeight,'color':dongLabelFontColor,'height':'auto'}"/>
				<view v-else-if="type=='picker'" class="donglabel" :style="{'padding-right':dongLabelpaddingRight,'padding-top':dongLabelpaddingTop,'height':dongLabelHeight,'font-size':dongLabelFontSize,'line-height':dongLabelHeight,'color':dongLabelFontColor}">
					<picker mode = "selector" @change="bindPickerChange" :value="index" range-key="dictLabel" :range="array" :style="{'height':dongLabelHeight}">
						<view class="uni-input">{{dongLabelnei}}</view>
					</picker>
				</view>
				
				<image v-if="qianjin" src="../../static/image/qianjin.png" mode="" class="qianjin" :style="{'margin-top':qianjinPaddingTop,'margin-right':qianjinPaddingRight}"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SeftCard",
		props:{
			pickerVal:{
				type:Number/String,
				default:0
			},
			dongLabel:{
				type:String,
				default:""
			},
			dongLabelHeight:{
				type:String,
				default:"40rpx"
			},
			dongLabelFontSize:{
				type:String,
				default:"28rpx"
			},
			dongLabelFontColor:{
				type:String,
				default:"#8A8B90"
			},
			dongLabelpaddingTop:{
				type:String,
				default:"30rpx"
			}
			,dongLabelpaddingRight:{
				type:String,
				default:"20rpx"
			},
			lable:{
				type:String,
				default:""
			},
			paddingLeft:{
				type:String,
				default:"30rpx"
			},
			lableHeight:{
				type:String,
				default:"40rpx"
			},
			lableFontSize:{
				type:String,
				default:"28rpx"
			},
			lableFontColor:{
				type:String,
				default:"#191919"
			},
			paddingBottom:{
				type:String,
				default:"28rpx"
			},
			paddingTop:{
				type:String,
				default:"30rpx"
			},
			qianjinPaddingTop:{
				type:String,
				default:"40rpx"
			},
			qianjinPaddingRight:{
				type:String,
				default:"20rpx"
			},
			qianjin:{
				type:Boolean,
				default:true
			},
			borderBottom:{
				type:String,
				default:"solid 1rpx #EFEFEF"
			},
			type:{
				type:String,
				default:"text"
			},
			placeholder:{
				type:String,
				default:""
			},
			inputValue:{
				type:String,
				default:""
			},
			index:0,
			inputName:{
				type:String,
				default:""
			},
			dictType:{
				type:String,
				default:"",
			}
		},
		data() {
			return {
				inputValue2:this.inputValue,
				dongLabelnei: this.dongLabel,
				array:[]
			};
		},
		created:function(){
			var that = this;
			if(this.dictType!=""){
				var arrayStr = uni.getStorageSync(this.dictType);
				if(arrayStr == undefined || arrayStr.length==0){
					this.$util.nuiAjax(this.$jiekou.getDictTypeList,{"dictType":this.dictType},function(res){
						if(res.result=="true"){
							that.array=res.data;
							for (var i = 0; i < that.array.length; i++) {
								if(that.array[i].dictValue==that.pickerVal){
									that.dongLabelnei = that.array[i].dictLabel;
								}
							}
							uni.setStorageSync(that.dictType,res.data);
						}
					})
				}else{
					this.array = arrayStr;
					for (var i = 0; i < arrayStr.length; i++) {
						if(arrayStr[i].dictValue==this.pickerVal){
							this.dongLabelnei = arrayStr[i].dictLabel;
						}
					}
				
				}
			}
		},
		methods:{
			bindPickerChange: function(e) {
				this.dongLabelnei = this.array[e.target.value].dictLabel;
				this.$emit('inputChang',this.array[e.target.value].dictValue);
			},
			inputChang:function(){
				this.$emit('inputChang',this.inputValue2);
			}
		}
	}
</script>

<style lang="scss">
	.donglabel{
		flex: 1;
		text-align: right;
	}
	.qianjin{
		width: 10rpx;
		height: 20rpx;
	}
</style>
